<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎来到详情页</title>
    <link rel="stylesheet" href="css/details.css">
    <link rel="stylesheet" href="css/reset.1.css">
</head>
<body>
    <div id="head">
                <div class="head-con conment">
                    <div class="head-con-left">
                    <a href="#"><img src="images/12.png" alt="">
                        京东首页 (选择页面)</a>      
                      <ul>
                          <li><a href="#">京东购物页</a></li>
                          <li><a href="#">京东登录页</a></li>
                          <li><a href="#">京东注册页</a></li>
                          <li><a href="#">京东详情页</a></li>
                          <li><a href="#">我的购物车</a></li>
                          <li><a href="#">关于京东</a></li>      
                      </ul>          
                    </div>
                    <div class="head-con-right">
                        <div class="head-con-right-left">
                            <a href="login.html">你好,请登录</a>
                            <a href="reg.html">免费注册</a>
                        </div>
                        <ul>
                            <li class="bdr"><a href="#">我的订单</a></li>
                            <li class="bdr"><a href="#">我的京东
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">京东会员</a></li>
                            <li class="bdr"><a href="#">企业采购
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">客户服务
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">网站导航
                                <i class="icon one"></i>
                            </a></li>
                            <li class="bdr"><a href="#">手机京东</a></li>
                        </ul>
                    </div>
                </div>
    </div>
    <div id="item">
        <div class="item-con conment">
            <div class="item-con-left">
                <a href="#" title="京东">
                    <h1>京东</h1>
                    </a>
                </div>
                <div class="item-con-center">
                    <form action="">
           <input type="text" placeholder="茶叶">
                   <input type="submit" value="搜全站">
                   <input type="submit" value="搜本店">

               </form>
            <div class="item-con-center-bottom">
                    <span>小青柑</span>
                     <a href="#">小罐茶</a>
                     <a href="#">铁观音</a>
                     <a href="#">八马赛珍珠</a>
                     <a href="#">大益茶</a>
               </div>
             </div>
            <div class="item-con-right">
                 <a href="#">
                     <i class="icon six"></i>购物车
                        <span class="carNum"> 0 </span>件
                 </a>
            </div>
                    </div>
    </div>
    <div id="banner">
        
    </div>
    <div id="nav">
    <div class="nav-con conment">
        <a href="#">首页</a>
        <a href="#">全部分类</a>
        <a href="#">家坊用品</a>
        <a href="#">家居日用</a>
        <a href="#">厨房用品</a>
        <a href="#">家装建材</a>
        <a href="#">箱包皮具</a>
    </div>
</div>
    <div id="center">
        <div class="center-con conment">
            <div class="center-con-left">
                <div class="middle">
                    <img width="380px" height="380px" src="" id="middleImg">
                    <div class="shade"></div>
                    <div class="big">
                        <img width="1600px" height="1600px" src="" id="bigImg">
                    </div>
                </div>
                <div class="small">
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="center-con-right">
                <h3>商城百货物任你选,任你挑</h3>
                <p><b>商品名称：</b><span id="goodsname"></span></p>
                <p><b>商品价格：</b>￥<span id="price">00</span>元</p>
                <p class="color"><b>评论：优</b>
                </p>
                <p class="dri"><b>类型：a类商品</b>
                </p>
                <p>
                    <a href="javascript:;" class="addCart" style="background: skyblue;color: white;font-size: 16px;">点击加入购物车</a>
                </p>
            </div>
        </div>
    </div>
    <div id="bottom">
        <div class="bottom-con conment">
            <h2>商品描述：</h2>
            <div class="introduce">
                        
            </div>
        </div>
    </div>
</body>
<script src="js/promiseAjax.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/cookie.js"></script>
<script>
    var usename=getCookie("usename");
    if(usename){
        var data=localStorage.getItem("data");
        if(data){
            data=JSON.parse(data);
            var numArr=data.map(function(v){
                return v.number;
            });
            var sum=numArr.reduce(function(a,b){
                return a+b;
            })
            document.querySelector(".carNum").innerText=sum;
        }else{
            document.querySelector(".carNum").innerText=sum;
        }
        }
    
</script>
<script>
var params = window.location.search;
var reg = /id=(\d+)/;
var id = params.match(reg)[1];
    sendAjax({
    url:"php/detail.php",
    data:{
        id:id
    },
    type:"post",
    success:function(res){
        if(res.status==200){
            var data = res.data;
            $("#middleImg").attr("src",data.imgpath);
            $("#bigImg").attr("src",data.imgpath);
            $("#goodsname").text(data.name);
            $("#price").text(data.price);
            $(".introduce").html(data.introduce);
            var  arr = data.smallimgs.split("====");
            for(var i=0;i<arr.length;i++){
                var li = $("<li><img src='"+arr[i]+"' width='50' height='50'></li>");
                $(".small ul").append(li);
                $(".small ul li").addClass("active");
            }
        }
    }
});
$(".addCart").click(function(){
    var usename = getCookie("usename");
    if(!usename){
        alert("请先登陆");
        location.href = 'login.html'; 
        return false;
    }
    var data = localStorage.getItem("data");
    if(data){
    console.log(data);
        data = JSON.parse(data);
        var index = data.findIndex(function(v){
            return v.id == id;
        }); 
        if(index>=0){
            data[index].number++;
        }else{
            var obj = {
                usename:usename,
                id:id,
                number:1
            };
            data.push(obj);
        }
        localStorage.setItem("data",JSON.stringify(data));
        
    }else{   
        var data = []; 
        var obj = { 
            usename:usename,
            id:id,
            number:1
        };
        data.push(obj);
        localStorage.setItem("data",JSON.stringify(data));
    }
    alert("添加购物车成功");
    location.href = "car.html"
    return false;
});
</script>
 <script>
function Enlarge(){
    this.box = document.querySelector(".center-con-left");
    this.middle = this.box.querySelector(".middle");
    this.middleImg = this.box.querySelector(".middle>img");
    this.shade = this.box.querySelector(".shade");
    this.big = this.box.querySelector(".big");
    this.bigImg = this.box.querySelector(".big>img");
    this.smallImgs =this.box.querySelectorAll(".small img");
    console.log(this.smallImgs)
    var _this = this;
    this.middle.onmouseover = ()=>{
        this.over();
    }
    this.middle.onmouseout = ()=>{
        this.out();
    }
    for(var i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].onclick=function(){
            _this.click(this);
        }
    }
}
Enlarge.prototype.click = function(ele){
    for(var i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].className = '';
    }
    ele.className = "active"
    this.middleImg.src = this.bigImg.src = ele.src
}
Enlarge.prototype.over = function(){
    this.shade.style.display = this.big.style.display = "block";
    this.middle.onmousemove= e=>{
        var e = e || window.event;
        var x = e.pageX;
        var y = e.pageY;
        var l = x - this.box.offsetLeft - this.shade.clientWidth/2;
        if(l<=0){
            l = 0;
        }
        if(l>=this.middle.clientWidth - this.shade.clientWidth){
            l=this.middle.clientWidth - this.shade.clientWidth
        }
        this.shade.style.left = l + "px"
        var t = y - this.box.offsetTop - this.shade.clientHeight/2;
        if(t<=0){
            t = 0;
        }
        if(t>=this.middle.clientHeight - this.shade.clientHeight){
            t=this.middle.clientHeight - this.shade.clientHeight
        }
        this.shade.style.top = t + "px"
        var percentX = this.shade.offsetLeft/this.middle.clientWidth;
        var percentY = this.shade.offsetTop/this.middle.clientHeight;
        var bigX = this.bigImg.clientWidth * percentX;
        var bigY = this.bigImg.clientHeight * percentY;
        this.bigImg.style.left = -bigX + "px";
        this.bigImg.style.top = -bigY + "px";
    }
}
Enlarge.prototype.out = function(){
    this.shade.style.display = this.big.style.display = "none"
}
var enlarge = new Enlarge();
</script> 
</html>